/*
 * @Description: 单个站点模块
 * @Author: yingying.fan
 * @Date: 2019-05-14 10:39:15
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-27 18:42:10
 */
<template>
  <div
    class="station-item-wrapper"
    :class="[selected?'fontsize34 baseColorNoAcitve':'fontsize32 color-no-selected']"
  >
    <!-- 线路的横线 -->
    <!-- <div class="flex-h flex-hc flex-vc station-line"> -->
    <span
      class="station-line-circle"
      :class="[selected?'baseBgColorNoActive':'circle-no-selected']"
    ></span>
    <!-- </div> -->
    <!-- 站点名称 -->
    <span>{{index+1}}</span>
    <div class="station-name-wrapper">
      {{stationId}}
      <p>
        {{stationName}}
      </p>
      <i
        v-if="stationInfo.hasAttention"
        class="iconfont icon-tixing-"
      ></i>
    </div>
  </div>
</template>

<script>
import StationInfoModel from '../model/StationInfoModel.js'
export default {
  props: {
    // 站点序号
    index: {
      type: Number,
      default: 0
    },
    // 是否是选中站点
    selected: {
      type: Boolean,
      default: false
    },
    // 当前站点信息
    stationInfo: {
      type: StationInfoModel,
      default: () => {
        return null
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {
    stationId() {
      if (this.$showDetail) {
        return `(${this.stationInfo.stationId})`
      }
      return ''
    },
    stationName() {
      return this.stationInfo.stationName.replace('（', '︵').replace('）', '︶')
    }
  }
}
</script>

<style scoped>
/* 单个站点的样式 */
.station-item-wrapper {
  height: calc(100% - 30px);
  /* width: 34px; */
  width: 142px;
  text-align: center;
  overflow: hidden;
}
/* 站点的线 */
/* .station-line {
  width: 100%;
  height: 16px;
  overflow: hidden;
} */
/* 站点的圈圈 */
.station-line-circle {
  display: block;
  box-sizing: border-box;
  width: 4px; /*no*/
  height: 4px; /*no*/
  border: solid #ffffff 1px; /*no*/
  border-radius: 50%;
  margin: 4px auto;
}
.circle-no-selected {
  background-color: #ffffff;
}
/* 站点的序号 */
.station-item-wrapper > span {
  font-size: 10px; /*no*/
  line-height: 1.6;
}
/* 站点序号未选中的样式 */
.color-no-selected > span {
  color: #999999;
}
/* 站点的名称 */
.station-name-wrapper {
  height: calc(100% - 60px);
  /* height: 80%; */
  width: 100%;
  overflow: auto;
}
.station-name-wrapper > p {
  width: 40px;
  word-wrap: break-word;
  margin: auto;
}
/* 设置了下车提醒的铃铛 */
.station-item-wrapper i {
  display: block;
  color: #ff8b41 !important;
  font-size: 30px !important;
  padding-top: 10px;
}
</style>
